<template>
  <div class="main">
    <div>
      <span class="configuration-item-text">UserKey</span>
      <el-input 
        v-model="userKeyInput" 
        placeholder="请输入User Key"
        @blur="setUserKey()" 
        style="display: inline-block; width: 200px;">
      </el-input>
      <el-popover
        placement="top"
        :width="150"
        trigger="hover"
      >
        <template #reference>
          <span class="tip-text">*获取UserKey</span>
        </template>
        <el-image :src="require('@/assets/chengxiaobai-wx.jpg')" fit="fill"/>
      </el-popover>
    </div>
        
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { userStore } from '@/pinia'

const useUserStore = userStore();

const userKeyInput = ref('');


const setUserKey = () => {
  useUserStore.setUserKey(userKeyInput.value);
}

</script>

<style lang="scss" scoped>
.main {
  padding: 10px;
}

.configuration-item-text {
  color: darkgrey;
  font-weight: 700;
  &::after {
    content: " : ";
  }
}

.tip-text {
  font-size: smaller;
  color: cadetblue;
  cursor: pointer
}


</style>